import React, { useState, useEffect, useCallback } from 'react'

export default function MultiEffectHookDemo() {
    // console.log("组件渲染");
    const [count, setCount] = useState(0);
    const [isLogin, setIsLogin] = useState(true);

    useEffect(() => {
        console.log("修改DOM", count);
    }, [count]);
    /**
     * count 是Number类型数据，是个 数字
     * useEffect()第二个参数传入了 count。下一次组件更新 调用 useEffect 方法，如果这次传递 过去的 第二个参数的值和上一次比较
     * 如果两次都是相同的，则第二次就不会执行回调函数了。如果不相同，就会调用回调函数。
     * 说白了 每次更新 useEffect()调用传递的第二个参数的 数字 和 上一次 传递的数字作比较 看有没有改变
     * 
     * 如果 count 是一个对象 {} (const obj = {a: 1})  或者 普通声明的函数 ( function fn() {} )
     * [{a: 1}]   或者 [fn] ===>  useEffect(function, [obj]) 或者 useEffect(function, [fn])
     * 每次更新时 会重新定义一个obj对象(或者重新声明函数) ，useEffect 调用传递过去的值 都是不一样的 obj对象（函数）。
     * 所以 useEffect 中的回调函数是会执行的
     * 
     * 优化：const fn = useCallback(() => {},[])
     *      useEffect(function, [fn])
     *      每次更新时 fn 就不会重新声明了，fn 只会声明一次，就是原来第一次的哪个函数
     *      所以 每次更新 useEffect()被调用 传递过去的第二个参数永远就是哪一个，一直都是相同的，所以回调函数不会执行
     * 
     */

    useEffect(() => {
        console.log("订阅事件");
    }, []);
    //===>>>> useEffect()第二个参数 是一个数组，传空数据 表示 不依赖任何变量，useEffect中的回调函数只会执行一次。后面就不会执行了

    useEffect(() => {
        console.log("网络请求");
    }, []);

    return (
        <div>
            <h2>MultiEffectHookDemo</h2>
            <h2>{count}</h2>
            <button onClick={e => setCount(count + 1)}>+1</button>
            <h2>{isLogin ? "coderwhy" : "未登录"}</h2>
            <button onClick={e => setIsLogin(!isLogin)}>登录/注销</button>
        </div>
    )
}
